<template>
  <div class="title">{{id}}</div>
  {{ newsDetail.title }}
  {{ newsDetail.create_time }}
  <div class="py-4" v-html="newsDetail.content"></div>
</template>

<script lang="ts" setup>
import { getArticleDetail } from "@/api/news";
import { reactive } from "vue";
import { useRoute } from "vue-router";

const newsDetail = reactive({
  title: "",
  create_time: "",
  content: ""
});

const getNewsDetail = async (id: number) => {
  let res = await getArticleDetail({ id: id });
  newsDetail.title = res.data.title;
  newsDetail.create_time = res.data.create_time;
  newsDetail.content = res.data.content;
}

const route = useRoute();

const id:number = parseInt(route.params.id);

getNewsDetail(id);

</script>
<style scoped lang="scss">
.title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
</style>